<script setup>
import {getMenu} from '/src/API/getMenu.js'
import {ref, onMounted} from 'vue'

let menuList = ref([])
const iconArray = ref(['icon-chanpingongzuotai', 'icon-shujuguanli', 'icon-yunshuguanli-cheliangguanli', 'icon-yuangongguanli', 'icon-yewu', 'icon-tiaoduling'])

async function getMenus() {
  let res = await getMenu()
  menuList.value = res.data
  for (let i = 0; i < iconArray.value.length; i++) {
    menuList.value[i].icon = iconArray.value[i]
  }
}

onMounted(() => {
  getMenus()
})

</script>

<template>
  <div class="menuBox">
    <img src="https://fe-slwl-manager.itheima.net/static/img/logo1.33ef7fa0.png" alt="" width="164px">
    <el-menu
        default-active="/dashboard"
        class="el-menu-vertical-demo"
        unique-opened
        router
        active-text-color="#FF705A"
    >
      <el-menu-item :index="menuList[0]?.path">
        <i class="iconfont" :class="menuList[0]?.icon"></i>
        <span>{{ menuList[0]?.name }}</span>
      </el-menu-item>
      <el-sub-menu
          :index="item.path"
          v-for="item in menuList.slice(1, menuList.length)"
          :key="item.id">
        <template #title>
          <i class="iconfont" :class="item?.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item :index="item.path" v-for="item in item.children">{{ item.name }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style scoped lang="less">
.menuBox {
  text-align: center;
  overflow: hidden;

  img {
    margin: 40px 0 20px 0;
  }

  ::v-deep(.el-sub-menu__title:hover), .el-menu-item:hover {
    background: rgba(255, 122, 99, 0.05);
  }
}

.el-menu {
  border-right: none;
}

.iconfont {
  margin-right: 5px;
  font-size: 22px;
}
</style>
